import { Button } from "antd";

import BaseModal from "../BaseModal";
import closeIcon from "@/assets/icons/icon-close.png";
import warningIcon from "@/assets/icons/icon-warning.png";
import styles from "./index.less";
import cn from "classnames";
interface Props {
  visible?: boolean;
  onClickOk?: () => void;
  width?: number | string;
  onClickCancel?: () => void;
  title?: React.ReactNode;
  content?: React.ReactNode;
  classNames?: string;
  wrapClassName?: string;
  okText?: string;
  cancelText?: string;
  dontShowIcon?: boolean;
  footer?: React.ReactNode;
  zIndex?: number;
  mask?:boolean;
}

const WarnModal = (props: Props) => {
  const {
    width,
    visible = false,
    title,
    onClickOk = () => {},
    onClickCancel = () => {},
    content,
    classNames,
    wrapClassName,
    okText,
    cancelText,
    dontShowIcon,
    footer,
    zIndex,
    mask
  } = props;
  return (
    <BaseModal
      mask={mask}
      title={title}
      centered
      visible={visible}
      onOk={onClickOk}
      onCancel={onClickCancel}
      width={width}
      icon={<img src={warningIcon} />}
      className={
        dontShowIcon
          ? cn(styles.modal_warnning_wrapper, styles.not_show_icon, classNames)
          : cn(styles.modal_warnning_wrapper, classNames)
      }
      closeIcon={<img src={closeIcon} />}
      footer={
        footer
          ? footer
          : [
              // 定义右下角 按钮的地方 可根据需要使用 一个或者 2个按钮
              okText && (
                <Button type="primary" className="btn_border_red" onClick={onClickOk}>
                  {okText}
                </Button>
              ),
              cancelText && (
                <Button onClick={onClickCancel}>{cancelText}</Button>
              ),
            ]
      }
      modalContent={
        <p className={styles.content}>
          <img src={warningIcon} />
          <span>{content}</span>
        </p>
      }
      wrapperClassName={wrapClassName}
      zIndex={zIndex}
    ></BaseModal>
  );
};

export default WarnModal;
